<template>
  <div class="login">
    <el-form :model="form" class="loginForm" label-width="auto">
      <div style="text-align: center; margin: 0 20px">
        <div>
          <div style="font-size: 25px; font-weight: bold">心有灵“析” - 登录</div>
        </div>
        <div style="margin-top: 50px">
          <el-form :model="form" :rules="rules" ref="formRef">
            <el-form-item prop="username">
              <el-input v-model="form.username" maxlength="10" type="text" placeholder="用户名">
                <template #prefix>
                  <el-icon>
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="form.password"
                type="password"
                maxlength="20"
                style="margin-top: 10px"
                placeholder="密码">
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-row style="margin-top: 5px">
              <el-col :span="12" style="text-align: left">
                <el-form-item prop="remember">
                  <el-checkbox v-model="form.remember" label="记住我" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div style="margin-top: 40px">
          <el-button @click="login()" style="width: 270px" type="success" plain>立即登录</el-button>
          <el-button style="width: 270px" type="success" @click="router.push('/')" plain>返回主页</el-button>
        </div>
        <div style="margin-top: 20px">
          <span style="font-size: 14px; line-height: 15px; color: grey">没有账号?</span>
          <el-link type="primary" style="translate: 0 -2px" @click="router.push('/register')">立即注册</el-link>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import router from "@/router";
import { onMounted, reactive, ref } from "vue";
import to from "await-to-js";
import { login as loginApi, getUserTags as getUserTagsApi } from "@/api/login/index.js";
import { ElMessage } from "element-plus";

const formRef = ref();
const form = reactive({
  username: "",
  password: "",
  remember: false,
});

const rules = {
  username: [{ required: true, message: "请输入用户名" }],
  password: [{ required: true, message: "请输入密码" }],
};

const login = async () => {
  if (form.username === "admin") {
    localStorage.setItem("isAdmin", true);
  } else {
    localStorage.setItem("isAdmin", false);
  }
  const [err, res] = await to(loginApi({ username: form.username, password: form.password }));
  if (!err) {
    localStorage.setItem("token", res.data.token);
    //提示用户登录成功
    ElMessage.success("登录成功");
    await getUserTags();
    if (form.username === "admin") {
      router.push("/");
    } else {
      router.push("/first");
    }
  }
};

const userTags = ref([]);
const getUserTags = async () => {
  const [err, res] = await to(getUserTagsApi());
  if (!err) {
    userTags.value = res.data;
    localStorage.setItem("tags", res.data);
  }
};
// 挂载钩子
onMounted(async () => {
  if (!localStorage.getItem("token")) {
    await login();
  }
});
</script>

<style scoped>
.loginForm {
  width: 600px;
  height: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
  border-radius: 10px; /* 添加圆角 */
}
.login {
  height: 100vh; /* 设置整个页面高度为视口高度 */
  background: linear-gradient(to bottom, #a6caeb, #bee6cb); /* 渐变色 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
</style>
